<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>下拉菜单</title>
    <style>
       .outer{
           width: 580px;
           margin: 0 auto;
       }
       
       .outer section{
           float: left;
           margin-left: 20px;
       }

       .one{
           background-color: grey;
           width: 520px;
           height: 40px;
           line-height: 40px;
       }
       
       .one li{
           float: left;
           margin-left: 58px;
           color: #eee;
           cursor: pointer;
       }

       .one li:hover{
           color: orange;
       }
       .one li:nth-of-type(1){
           margin-left: 35px;
       }
       .clear{
           clear: both;
       }


       div{
           background-color: lightgray;
       }
       ul{
           list-style: none;
           margin: 0;
           padding: 0;
           border-left: 1px solid grey;
          
       }
      .outer section ul li{
           text-align: center;
           margin-top: 20px;
           color: grey;
           cursor: pointer;
           
           
           border-bottom: 1px solid white;
       }
       .outer section ul li:hover{
           border-bottom: 1px solid grey;
       }
       .outer section ul {
          border-left: 1px solid grey;
          border-right: 1px solid grey;
          border-bottom: 1px solid grey;
          padding-bottom: 20px;
          padding-top: 20px;
          width: 100px; 
          text-align: center;
       }
       .outer section ul li:nth-of-type(1){
           margin-top: 0;
       }
       .hide{
           /*隐藏后 元素的位置依然保留*/
           visibility:hidden
       }
       
       
    </style>
</head>
<body>
    <section class="outer">
          
          <ul class="one">
            <li class="selected">公司简介</li>
            <li>产品介绍</li>
            <li>联系我们</li>
            <li>人才招聘</li>
            <div class="clear"></div>
        </ul>
        <div class="inner">
           <section id="first" class="hide">
             <!--<div>公司简介</div>-->
             <ul>
                <li>概况介绍</li>
                <li>发展历史</li>
                <li>公司实力</li>
             </ul>
         </section>
         <section id="second" class="hide">
             <!--<div>产品介绍</div>-->
             <ul>
                 <li>软件开发</li>
                 <li>软件教育</li>
                 <li>天使投资</li>
             </ul>
         </section>
         <section id="third" class="hide">
             <!--<div>联系我们</div>-->
             <ul>
                 <li>公司地址</li>
                 <li>联系方式</li>
                 <li>投资加盟</li>
             </ul>
         </section>
         <section id="fourth" class="hide">
             <!--<div>人才招聘</div>-->
             <ul>
                 <li>IOS招聘</li>
                 <li>HTML5招聘</li>
                 <li>PHP招聘</li>
             </ul>
         </section>
        </section>

    </div>
    
</body>
</html>
<script>
    $('.one li').mouseover(function(){
        // 获取鼠标停留 li标签上的文字
        var text=$(this).text();
        // console.log(text);
        // 根据文字 设置下方包裹ul的section是否隐藏
        if(text=='公司简介'){
            // 根据id找到第一个section移除 使其隐藏的类,其他兄弟元素添加.hide
            // 其他section是否隐藏以此类推
            $('.outer #first').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='产品介绍'){
            $('.outer #second').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='联系我们'){
            $('.outer #third').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='人才招聘'){
            $('.outer #fourth').removeClass('hide').siblings().addClass('hide');
        }
        
    });



</script>